import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:ichinesereader/controller/user.dart';
import 'package:ichinesereader/utils/log.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:get/get.dart';
import '../../themes/appTheme.dart';

class LevelPointsProgressWidgetDesktop extends StatelessWidget {
  LevelPointsProgressWidgetDesktop({
    Key? key,
  }) : super(key: key);
  final UserController _userController = Get.find();
  final box = Hive.box('appconfig');

  @override
  Widget build(BuildContext context) {
    Log.debug('build desktop LevelProgressIndicatorWidget');
    // bool isStudent = box.get(CacheManagerKey['nanhairole'].toString()) ==
    //     Constants.NanhaiRole_Student;
    //String _currentLevel = 'Level'.tr;
    String? level = '1';
    int? progress = 0;
    String _bookRead = 'Books Read:'.tr;
    String _totalPoints = 'Total Points:'.tr;

    return Obx(() {
      if (_userController.profile.value.userName != null) {
        if (_userController.profile.value.level != null) {
          try {
            level = _userController.profile.value.level
                .toString()
                .replaceAll('level', '');
            // progress = (_userController.profile.value.levelPercentage! / 100)
            //     .toDouble();
            progress = _userController.profile.value.levelPercentage ?? 0;
          } catch (error) {}
        }

        return Container(
          decoration: BoxDecoration(
            color:
                Get.isDarkMode ? Colors.black : Colors.white.withOpacity(0.3),
            borderRadius: BorderRadius.circular(3.0),
            boxShadow: [
              BoxShadow(
                blurRadius: 20,
                spreadRadius: 1,
                color: Get.isDarkMode
                    ? Colors.transparent
                    : Colors.black.withOpacity(0.1),
                offset: Offset(3, 3),
              ),
            ],
          ),
          padding: EdgeInsets.fromLTRB(12.0, 0.0, 9.0, 12.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 12.0),
                    child: Column(
                      children: [
                        Stack(
                          alignment: Alignment.bottomRight,
                          children: [
                            Container(
                              margin: EdgeInsets.only(top: 13, right: 13),
                              padding: EdgeInsets.only(
                                top: 18.0,
                                right: 21.0,
                                bottom: 15.0,
                                left: 6.0,
                              ),
                              decoration: BoxDecoration(
                                color: Get.isDarkMode
                                    ? Color(0xff222222)
                                    : Color(0xfff8ac59).withOpacity(0.8),
                                borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(9),
                                  bottomRight: Radius.circular(9),
                                  topLeft: Radius.circular(9),
                                  bottomLeft: Radius.circular(9),
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    blurRadius: 6,
                                    spreadRadius: 1,
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.black.withOpacity(0.2),
                                    offset: Offset(3, 3),
                                  ),
                                ],
                              ),
                              child: Column(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 10.0),
                                    child: Container(
                                      padding:
                                          EdgeInsets.symmetric(horizontal: 9),
                                      decoration: BoxDecoration(
                                        color: Get.isDarkMode
                                            ? Get.theme.primaryColor
                                            : Colors.black.withOpacity(0.1),
                                        borderRadius: BorderRadius.circular(10),
                                      ),
                                      child: Text(
                                        '$_bookRead',
                                        maxLines: 1,
                                        overflow: TextOverflow.fade,
                                        softWrap: false,
                                        style: Theme.of(context)
                                            .textTheme
                                            .displayLarge
                                            ?.copyWith(
                                              fontSize: 12,
                                              color: Get.isDarkMode
                                                  ? Get.theme.primaryColorDark
                                                  : Colors.white,
                                            ),
                                      ),
                                    ),
                                  ),
                                  Text(
                                    '${_userController.profile.value.numBooks.toString()}',
                                    style: Theme.of(context)
                                        .textTheme
                                        .displayLarge
                                        ?.copyWith(
                                          fontFamily: 'TitanOne',
                                          color: Colors.white,
                                          fontSize: 21,
                                        ),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: 45,
                              height: 45,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Get.isDarkMode
                                    ? Colors.black.withOpacity(0.6)
                                    : Colors.orange.withOpacity(0.3),
                                boxShadow: [
                                  BoxShadow(
                                    blurRadius: 5,
                                    spreadRadius: 1,
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.black.withOpacity(0.3),
                                    offset: Offset(1, 1),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: 39,
                              height: 39,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColor
                                    : Colors.white.withOpacity(0.8),
                              ),
                              child: Icon(
                                Icons.menu_book_outlined,
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColorDark
                                    : Colors.orange.withOpacity(0.6),
                                size: 18,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),

                  //PINK TOTAL POINTS BLOCK
                  Column(
                    children: [
                      Container(
                        //margin: EdgeInsets.only(right: 20),
                        child: Stack(
                          alignment: Alignment.bottomRight,
                          children: [
                            Container(
                              margin: EdgeInsets.only(
                                top: 13,
                              ),
                              padding: EdgeInsets.only(
                                top: 18,
                                right: 33,
                                bottom: 15,
                                left: 15,
                              ),
                              decoration: BoxDecoration(
                                color: Get.isDarkMode
                                    ? Color(0xff222222)
                                    : Color(0xffed5565).withOpacity(0.7),
                                borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(9),
                                  bottomRight: Radius.circular(9),
                                  topLeft: Radius.circular(9),
                                  bottomLeft: Radius.circular(9),
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    blurRadius: 6,
                                    spreadRadius: 1,
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.black.withOpacity(0.2),
                                    offset: Offset(3, 3),
                                  ),
                                ],
                              ),
                              child: Column(
                                children: [
                                  Container(
                                    padding:
                                        EdgeInsets.symmetric(horizontal: 9),
                                    decoration: BoxDecoration(
                                      color: Get.isDarkMode
                                          ? Get.theme.primaryColor
                                          : Colors.black.withOpacity(0.1),
                                      borderRadius: BorderRadius.circular(10),
                                    ),
                                    child: Text(
                                      '$_totalPoints',
                                      maxLines: 1,
                                      overflow: TextOverflow.fade,
                                      softWrap: false,
                                      style: Theme.of(context)
                                          .textTheme
                                          .displayLarge
                                          ?.copyWith(
                                            fontSize: 12,
                                            color: Get.isDarkMode
                                                ? Get.theme.primaryColorDark
                                                : Colors.white,
                                          ),
                                    ),
                                  ),
                                  Text(
                                    '${_userController.profile.value.points.toString()}',
                                    style: Theme.of(context)
                                        .textTheme
                                        .displayLarge
                                        ?.copyWith(
                                          fontFamily: 'TitanOne',
                                          color: Get.isDarkMode
                                              ? Get.theme.primaryColorDark
                                              : Colors.white,
                                          fontSize: 21,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: 45,
                              height: 45,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Get.isDarkMode
                                    ? Colors.black.withOpacity(0.6)
                                    : Colors.pinkAccent.withOpacity(0.3),
                                boxShadow: [
                                  BoxShadow(
                                    blurRadius: 5,
                                    spreadRadius: 1,
                                    color: Get.isDarkMode
                                        ? Colors.transparent
                                        : Colors.black.withOpacity(0.3),
                                    offset: Offset(1, 1),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: 39,
                              height: 39,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColor
                                    : Colors.white.withOpacity(0.8),
                              ),
                              child: Icon(
                                Icons.diamond,
                                color: Get.isDarkMode
                                    ? Get.theme.primaryColorDark
                                    : Colors.pinkAccent.withOpacity(0.8),
                                size: 18.0,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  )
                ],
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(left: 12.0),
                  decoration: BoxDecoration(
                    color: Get.isDarkMode
                        ? AppTheme.colors.darkTheme2
                        : Color(0xffa3fca8).withOpacity(0.3),
                    boxShadow: [
                      BoxShadow(
                        blurRadius: 6,
                        spreadRadius: 1,
                        color: Get.isDarkMode
                            ? Colors.transparent
                            : Colors.black.withOpacity(0.1),
                        offset: Offset(3, 3),
                      ),
                    ],
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(3.0),
                      bottomLeft: Radius.circular(3.0),
                      topRight: Radius.circular(3.0),
                      bottomRight: Radius.circular(3.0),
                    ),
                  ),
                  child: new LinearPercentIndicator(
                    padding: EdgeInsets.only(left: 9.0),
                    progressColor: Get.isDarkMode
                        ? Theme.of(context).primaryColorDark
                        : Color(0xff8db4f9).withOpacity(0.9),
                    animation: true,
                    lineHeight: 24.0,
                    animationDuration: 1500,
                    percent: (progress! / 100).toDouble(),
                    center: Text(
                      //"$_currentLevel $level",
                      '$progress%',
                      maxLines: 1,
                      overflow: TextOverflow.fade,
                      softWrap: false,
                      style: TextStyle(
                        fontSize: 12.0,
                        letterSpacing: 1,
                        color: Get.isDarkMode
                            ? Colors.black
                            : Colors.blueGrey.withOpacity(0.9),
                      ),
                    ),
                    trailing: Container(
                      margin: EdgeInsets.only(left: 15),
                      padding: const EdgeInsets.symmetric(
                        horizontal: 10,
                      ),
                      width: 51,
                      height: 51,
                      decoration: BoxDecoration(
                        color: Get.isDarkMode
                            ? Get.theme.primaryColor
                            : Colors.white.withOpacity(0.8),
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(0),
                          bottomLeft: Radius.circular(0),
                          topRight: Radius.circular(3),
                          bottomRight: Radius.circular(3),
                        ),
                        boxShadow: [
                          BoxShadow(
                            blurRadius: 1,
                            spreadRadius: 1,
                            color: Get.isDarkMode
                                ? Colors.transparent
                                : Colors.lightGreen.withOpacity(0.3),
                            offset: Offset(1, 1),
                          ),
                          BoxShadow(
                            blurRadius: 1,
                            spreadRadius: 1,
                            color: Get.isDarkMode
                                ? Colors.transparent
                                : Colors.lightGreen.withOpacity(0.3),
                            offset: Offset(-1, -1),
                          ),
                        ],
                      ),
                      child: Center(
                        child: Text(
                          "L $level",
                          maxLines: 1,
                          style: TextStyle(
                              color: Get.isDarkMode
                                  ? Get.theme.primaryColorDark
                                  : Colors.lightGreen,
                              fontSize: 14.0,
                              fontWeight: FontWeight.bold,
                              overflow: TextOverflow.fade),
                        ),
                      ),
                    ),
                    barRadius: Radius.circular(16),
                    backgroundColor: Get.isDarkMode
                        ? Theme.of(context).primaryColor
                        : Theme.of(context).primaryColorLight,
                  ),
                ),
                // Container(
                //   padding: EdgeInsets.only(left: 10),
                //   decoration: BoxDecoration(
                //     color: Get.isDarkMode
                //         ? AppTheme.colors.darkTheme2
                //         : Color(0xffa3fca8).withOpacity(0.3),
                //     boxShadow: [
                //       BoxShadow(
                //         blurRadius: 6,
                //         spreadRadius: 1,
                //         color: Get.isDarkMode
                //             ? Colors.transparent
                //             : Colors.black.withOpacity(0.1),
                //         offset: Offset(3, 3),
                //       ),
                //     ],
                //     borderRadius: BorderRadius.only(
                //       topLeft: Radius.circular(6),
                //       bottomLeft: Radius.circular(6),
                //       topRight: Radius.circular(6),
                //       bottomRight: Radius.circular(6),
                //     ),
                //   ),
                //   child: new LinearPercentIndicator(
                //     padding: EdgeInsets.all(2),
                //     progressColor: Get.isDarkMode
                //         ? Theme.of(context).primaryColorDark
                //         : Color(0xff8db4f9).withOpacity(0.9),
                //     animation: true,
                //     lineHeight: 24.0,
                //     animationDuration: 1500,
                //     percent: (progress! / 100).toDouble(),
                //     center: Text(
                //       "$_currentLevel $level",
                //       style: TextStyle(
                //           letterSpacing: 1,
                //           color: Get.isDarkMode
                //               ? Colors.black
                //               : Colors.blueGrey.withOpacity(0.9),
                //           fontSize: 16.0,
                //           fontWeight: FontWeight.w700),
                //     ),
                //     trailing: Container(
                //       margin: EdgeInsets.only(left: 15),
                //       padding: const EdgeInsets.symmetric(
                //         horizontal: 15,
                //       ),
                //       width: 60,
                //       height: 60,
                //       decoration: BoxDecoration(
                //         color: Get.isDarkMode
                //             ? Get.theme.primaryColor
                //             : Colors.white.withOpacity(0.8),
                //         borderRadius: BorderRadius.only(
                //           topLeft: Radius.circular(0),
                //           bottomLeft: Radius.circular(0),
                //           topRight: Radius.circular(6),
                //           bottomRight: Radius.circular(6),
                //         ),
                //         boxShadow: [
                //           BoxShadow(
                //             blurRadius: 1,
                //             spreadRadius: 1,
                //             color: Get.isDarkMode
                //                 ? Colors.transparent
                //                 : Colors.lightGreen.withOpacity(0.3),
                //             offset: Offset(1, 1),
                //           ),
                //           BoxShadow(
                //             blurRadius: 1,
                //             spreadRadius: 1,
                //             color: Get.isDarkMode
                //                 ? Colors.transparent
                //                 : Colors.lightGreen.withOpacity(0.3),
                //             offset: Offset(-1, -1),
                //           ),
                //         ],
                //       ),
                //       child: Center(
                //         child: Text(
                //           "$progress%",
                //           style: TextStyle(
                //               color: Get.isDarkMode
                //                   ? Get.theme.primaryColorDark
                //                   : Colors.lightGreen,
                //               fontSize: 19.0,
                //               fontWeight: FontWeight.w700),
                //         ),
                //       ),
                //     ),
                //     barRadius: Radius.circular(16),
                //     backgroundColor: Get.isDarkMode
                //         ? Theme.of(context).primaryColor
                //         : Theme.of(context).primaryColorLight,
                //   ),
                // ),
              ),

              ////////level bar here///////
              // Expanded(
              //   child: Container(
              //     padding: EdgeInsets.only(left: 10),
              //     decoration: BoxDecoration(
              //       color: Get.isDarkMode
              //           ? AppTheme.colors.darkTheme2
              //           : Color(0xffa3fca8).withOpacity(0.3),
              //       boxShadow: [
              //         BoxShadow(
              //           blurRadius: 6,
              //           spreadRadius: 1,
              //           color: Get.isDarkMode
              //               ? Colors.transparent
              //               : Colors.black.withOpacity(0.1),
              //           offset: Offset(3, 3),
              //         ),
              //       ],
              //       borderRadius: BorderRadius.only(
              //         topLeft: Radius.circular(6),
              //         bottomLeft: Radius.circular(6),
              //         topRight: Radius.circular(6),
              //         bottomRight: Radius.circular(6),
              //       ),
              //     ),
              //     child: new LinearPercentIndicator(
              //       padding: EdgeInsets.all(2),
              //       progressColor: Get.isDarkMode
              //           ? Theme.of(context).primaryColorDark
              //           : Color(0xff8db4f9).withOpacity(0.9),
              //       animation: true,
              //       lineHeight: 24.0,
              //       animationDuration: 1500,
              //       percent: (progress! / 100).toDouble(),
              //       center: Text(
              //         "$_currentLevel $level",
              //         style: TextStyle(
              //             letterSpacing: 1,
              //             color: Get.isDarkMode
              //                 ? Colors.black
              //                 : Colors.blueGrey.withOpacity(0.9),
              //             fontSize: 16.0,
              //             fontWeight: FontWeight.w700),
              //       ),
              //       trailing: Container(
              //         margin: EdgeInsets.only(left: 15),
              //         padding: const EdgeInsets.symmetric(
              //           horizontal: 15,
              //         ),
              //         width: 60,
              //         height: 60,
              //         decoration: BoxDecoration(
              //           color: Get.isDarkMode
              //               ? Get.theme.primaryColor
              //               : Colors.white.withOpacity(0.8),
              //           borderRadius: BorderRadius.only(
              //             topLeft: Radius.circular(0),
              //             bottomLeft: Radius.circular(0),
              //             topRight: Radius.circular(6),
              //             bottomRight: Radius.circular(6),
              //           ),
              //           boxShadow: [
              //             BoxShadow(
              //               blurRadius: 1,
              //               spreadRadius: 1,
              //               color: Get.isDarkMode
              //                   ? Colors.transparent
              //                   : Colors.lightGreen.withOpacity(0.3),
              //               offset: Offset(1, 1),
              //             ),
              //             BoxShadow(
              //               blurRadius: 1,
              //               spreadRadius: 1,
              //               color: Get.isDarkMode
              //                   ? Colors.transparent
              //                   : Colors.lightGreen.withOpacity(0.3),
              //               offset: Offset(-1, -1),
              //             ),
              //           ],
              //         ),
              //         child: Center(
              //           child: Text(
              //             "$progress%",
              //             style: TextStyle(
              //                 color: Get.isDarkMode
              //                     ? Get.theme.primaryColorDark
              //                     : Colors.lightGreen,
              //                 fontSize: 19.0,
              //                 fontWeight: FontWeight.w700),
              //           ),
              //         ),
              //       ),
              //       barRadius: Radius.circular(16),
              //       backgroundColor: Get.isDarkMode
              //           ? Theme.of(context).primaryColor
              //           : Theme.of(context).primaryColorLight,
              //     ),
              //   ),
              // ),

              //SettingsBarHorizontal(true),
            ],
          ),
        );
      } else {
        return Text('');
      }
    });
  }
}
